<template>
  <div class="timing">
    <el-row style="margin-bottom:10px;">
      <el-col :span="24">
        <el-form :inline="true" :model="formInline" class="demo-form-inline queryFrom">
          <el-form-item label="目录名称">
            <el-input v-model="formInline.dataModelName" clearable placeholder="请输入目录名称" />
          </el-form-item>
          <el-form-item>
            <el-button plain @click="getUserList"><Icon type="ios-search" />查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 按钮 -->
    <el-row style="margin-bottom:10px;">
      <el-col :span="24">
        <el-button type="primary" @click="addUser('add')"><Icon type="md-add" />创建主题目录</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <ykhttb
      ref="httbRef"
      width="250"
      :btn-is-show="btnIsShow"
      :table-col="tabUserList"
      :table-data="tableUserData"
      @getDataDetileInfo="getDataDetileInfo"
      @deleteSelectData="deleteSelectData"
      @refresh="getUserList"
    />
    <!-- 分页 -->
    <div style="text-align:right;margin-top:10px;">
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog :close-on-click-modal="false" :title="title" width="50%" :visible.sync="dialogTableVisible">
      <!-- 名称和路径必输 -->
      <el-form v-if="dialogTableVisible" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm autoClass">
        <el-form-item label="目录名称" prop="subjectDirectoryName">
          <el-input v-model="ruleForm['subjectDirectoryName']" :disabled="disFlag" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="目录类型" prop="subjectDirectoryTypeNum">
          <el-select v-model="ruleForm['subjectDirectoryTypeNum']" :disabled="disFlag" clearable placeholder="请选择质量规则类型" @change="getName">
            <el-option
              v-for="(item,i) in selectDataList"
              :key="i"
              :label="item.name"
              :value="Number(item.num)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="数据提供方" prop="dataProvider">
          <el-input v-model="ruleForm['dataProvider']" :disabled="disFlag" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="联系方式" prop="phoneNumber">
          <el-input v-model="ruleForm['phoneNumber']" :disabled="disFlag" clearable placeholder="" />
        </el-form-item>
      </el-form>
      <div v-if="!disFlag" style="text-align: center;">
        <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
        <el-button @click="resetForm('return')">返回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { dataSubjectdirectorygetList, dataSubjectdirectorysaveOne, dataSubjectdirectoryupdateById, dataSubjectdirectorydeleteByIds } from '@/api/zt/index'
import experiment from '@/mixins/experiment'
import { validatePhone } from '@/utils/validate'

export default {
  components: {
  },
  mixins: [experiment],
  data() {
    return {
      btnIsShow: {
        operate: true,
        detile: true,
        del: true
      },
      tpConent: 1,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      title: '新增',
      rules: {
        subjectDirectoryName: [
          { required: true, message: '请输入目录名称', trigger: 'change' }
        ],
        subjectDirectoryTypeNum: [
          { required: true, message: '请选择目录类型', trigger: 'change' }
        ],
        dataProvider: [
          { required: true, message: '请输入数据提供方', trigger: 'change' }
        ],
        phoneNumber: [
          { required: true, message: '请输入联系方式', trigger: 'change' }
        ]
      },
      dialogTableVisible: false,
      ruleForm: {
        'subjectDirectoryTypeName': '',
        'phoneNumber': '',
        'dataProvider': '',
        'subjectDirectoryName': '',
        'subjectDirectoryTypeNum': ''
      },
      userId: '',
      formInline: {
        'dataModelName': ''
      },
      tableUserData: [],
      tabUserList: [
        {
          key: 'subjectDirectoryName',
          title: '目录名称'
        },
        {
          key: 'subjectDirectoryTypeName',
          title: '目录类型'
        },
        {
          key: 'dataProvider',
          title: '数据提供方'
        },
        {
          key: 'phoneNumber',
          title: '联系方式'
        }
      ],
      selectDataList: [],
      total: 0,
      size: 10,
      page: 1
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$route.path == '/ykp/dataChildrenSys/datasrctheme') {
        this.tpConent = 1
      } else if (this.$route.path == '/ykp/datatheme/datasrctheme') {
        this.tpConent = 2
      }
      this.getUserList()
      this.getcodequery('subjectDirectoryType')
    })
  },
  methods: {
    getName() {
      this.selectDataList.forEach((item, index) => {
        if (this.ruleForm['subjectDirectoryTypeNum'] == item.num) {
          this.ruleForm['subjectDirectoryTypeName'] = item.name
        }
      })
    },
    deleteSelectData(v) {
      const ids = [{ id: v.id }]
      dataSubjectdirectorydeleteByIds(ids).then(res => {
        if (res.code == 200) {
          this.getUserList()
        } else {
          this.errorDialog(res.msg)
        }
      })
    },
    handleNodeClick(data) { },
    commitFromData() {
      this.ruleForm['typeContent'] = this.tpConent
      if (this.ruleForm.hasOwnProperty('id')) {
        dataSubjectdirectoryupdateById(this.ruleForm).then(res => {
          if (res.code == 200) {
            this.getUserList()
          } else {
            this.errorDialog(res.msg)
          }
        })
      } else {
        dataSubjectdirectorysaveOne(this.ruleForm).then(res => {
          if (res.code == 200) {
            this.getUserList()
          } else {
            this.errorDialog(res.msg)
          }
        })
      }
    },
    handleSizeChange(v) {
      this.page = 1
      this.size = v
      this.getUserList()
    },
    handleCurrentChange(v) {
      this.page = v
      this.getUserList()
    },

    // 获取用户列表
    getUserList() {
      this.dialogTableVisible = false

      this.$refs.httbRef.isShowLoading(true)
      dataSubjectdirectorygetList({
        'pageIndex': this.page,
        'pageSize': this.size,
        'typeContent': this.tpConent,
        'subjectDirectoryName': this.formInline.dataModelName
      }).then(res => {
        this.tableUserData = res.data.records
        this.total = res.data.total
        this.$refs.httbRef.isShowLoading(false)
      })
    }
  }
}
</script>

          <style lang="scss" scoped>
          >>>.jsoneditor-poweredBy {
            display: none !important;
          }

          .addPs{
            display: flex;
            flex-direction: row;
            margin-bottom: 10px;
            >div{
              width:50%
            }
            span{
              display: inline-block;
              width: 10%;
            }
          }
          .autoClass{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            .el-form-item{
              width:50%;
            }
          }

          .addcs{
            display: flex;
            flex-direction: row;
            margin-bottom: 10px;
          }
          .addcs2 .el-select {
            display: inline-block;
            width: 240px;
          }
          .autoInput{
            display: inline-block;
            width: 70%;
          }
          .infoTitle{
            border-bottom:1px solid #e5e5e5;
            margin-bottom: 30px;
            position: relative;
          }
          .infoTitle>span{
            position: absolute;
            left: 20px;
            background: #fff;
            width:80px;
            top:-15px;
            height:30px;
            text-align: center;
            line-height: 30px;
          }
            .el-select{
               width:100%;
            }
            .timing{
              background:#fff;
              padding:20px;
            }
          </style>
